<template>
  <div class="global-container">
    <div class="form-main">
      <el-form :model="formData" ref="form" label-width="170px" class="form">
        <el-form-item
          label="单位名称"
          prop="unitName"
          :rules="$validate.maxLength(true, 0, 50)"
        >
          <el-input v-model.trim="formData.unitName"></el-input>
        </el-form-item>
        <el-form-item
          label="注册地址"
          prop="unitAddrCountyCode"
          :rules="$validate.required('change')"
        >
          <AreaSelect
            :form="formData"
            :proField="'unitAddrPro'"
            :cityField="'unitAddrCity'"
            :countyField="'unitAddrCounty'"
            :needName="true"
          />
        </el-form-item>
        <el-form-item
          label="注册详细地址"
          prop="unitAddress"
          :rules="$validate.maxLength(true, 0, 100)"
        >
          <el-input v-model.trim="formData.unitAddress"></el-input>
        </el-form-item>
        <el-form-item
          label="邮寄地址"
          prop="county"
          :rules="$validate.required('change')"
        >
          <AreaSelect :form="formData" />
        </el-form-item>
        <el-form-item
          prop="address"
          label="邮寄详细地址"
          :rules="$validate.maxLength(true, 0, 100)"
        >
          <el-input v-model.trim="formData.address"></el-input>
        </el-form-item>
        <el-form-item
          label="邮政编码"
          prop="unitPostCode"
          :rules="$validate.maxLength(true, 0, 10)"
        >
          <el-input v-model.trim="formData.unitPostCode"></el-input>
        </el-form-item>
        <el-form-item
          label="联系电话"
          prop="unitTel"
          :rules="$validate.maxLength(true, 0, 50)"
        >
          <el-input v-model.trim="formData.unitTel"></el-input>
        </el-form-item>
        <el-form-item
          label="成立时间"
          prop="unitEstTime"
          :rules="$validate.required()"
        >
          <AdatePicker
            :pickerOptions="pickerOptions()"
            v-model="formData.unitEstTime"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item
          label="营业执照注册号"
          prop="creditCode"
          :rules="$validate.maxLength(true, 0, 50)"
        >
          <el-input v-model.trim="formData.creditCode"></el-input>
        </el-form-item>
        <el-form-item
          label="发证机关"
          prop="fzjg"
          :rules="$validate.maxLength(true, 0, 50)"
        >
          <el-input v-model.trim="formData.fzjg"></el-input>
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="14">
            <el-form-item
              label="法定代表人"
              prop="fddbrXm"
              :rules="$validate.maxLength(true, 0, 50)"
            >
              <el-input v-model.trim="formData.fddbrXm" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="职务"
              prop="fddbrZw"
              label-width="60px"
              :rules="$validate.maxLength(true, 0, 50)"
            >
              <el-input v-model.trim="formData.fddbrZw"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="法定代表人职称"
          prop="fddbrZc"
          :rules="$validate.required('change')"
        >
          <Aselect
            v-model="formData.fddbrZc"
            :options="$dict('title_level').list()"
          />
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="14">
            <el-form-item
              label="技术负责人"
              prop="jsfzrXm"
              :rules="$validate.maxLength(true, 0, 50)"
            >
              <el-input v-model.trim="formData.jsfzrXm"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="职务"
              prop="jsfzrZw"
              label-width="60px"
              :rules="$validate.maxLength(true, 0, 50)"
            >
              <el-input v-model.trim="formData.jsfzrZw"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="技术负责人职称"
          prop="jsfzrZc"
          :rules="$validate.required('change')"
        >
          <Aselect
            v-model="formData.jsfzrZc"
            :options="$dict('title_level').list()"
          />
        </el-form-item>
        <el-form-item
          label="计量认证证书号"
          prop="jlrzzsh"
          :rules="$validate.maxLength(true, 0, 50)"
        >
          <el-input v-model.trim="formData.jlrzzsh"></el-input>
        </el-form-item>
        <el-form-item
          label="计量认证证书发证机关"
          prop="jlrzfzjg"
          :rules="$validate.maxLength(true, 0, 50)"
        >
          <el-input v-model.trim="formData.jlrzfzjg"></el-input>
        </el-form-item>
        <el-form-item
          :rules="$validate.maxLength(false, 0, 50)"
          label="传真"
          prop="unitFax"
        >
          <el-input v-model.trim="formData.unitFax"></el-input>
        </el-form-item>
        <el-form-item
          label="电子邮箱"
          prop="unitEmail"
          :rules="$validate.email(true)"
        >
          <el-input v-model.trim="formData.unitEmail"></el-input>
        </el-form-item>
        <el-form-item
          label="注册资金（万元）"
          prop="zczj"
          :rules="($validate.numRange(true, 0, 999999), $validate.decimal(true,3))"
        >
          <el-input v-model.trim="formData.zczj"></el-input>
        </el-form-item>
        <el-form-item
          label="经济性质"
          prop="jjxz"
          :rules="$validate.maxLength(true, 0, 50)"
        >
          <el-input v-model.trim="formData.jjxz"></el-input>
        </el-form-item>
        <el-form-item
          label="开户银行"
          prop="khxh"
          :rules="$validate.maxLength(true, 0, 50)"
        >
          <el-input v-model.trim="formData.khxh"></el-input>
        </el-form-item>
        <el-form-item
          label="银行账号"
          prop="khxhzh"
          :rules="$validate.maxLength(true, 0, 50)"
        >
          <el-input v-model.trim="formData.khxhzh"></el-input>
        </el-form-item>
        <el-form-item
          label="在编人员总数（人）"
          prop="zbryzs"
          :rules="$validate.numRange(true, 0, 999999)"
        >
          <el-input v-model.number="formData.zbryzs"></el-input>
        </el-form-item>
        <el-form-item
          label="专业技术人员数（人）"
          prop="zyjsryrs"
          :rules="$validate.numRange(true, 0, 999999)"
        >
          <el-input v-model.number="formData.zyjsryrs"></el-input>
        </el-form-item>
        <el-form-item
          label="高级职称人数（人）"
          prop="gjzcrs"
          :rules="$validate.numRange(true, 0, 999999)"
        >
          <el-input v-model.number="formData.gjzcrs"></el-input>
        </el-form-item>
        <el-form-item
          label="中级职称人数（人）"
          prop="zjzcrs"
          :rules="$validate.numRange(true, 0, 999999)"
        >
          <el-input v-model.number="formData.zjzcrs"></el-input>
        </el-form-item>
        <el-form-item
          label="仪器设备总台（套）数"
          prop="sbzs"
          :rules="$validate.numRange(true, 0, 999999)"
        >
          <el-input v-model.number="formData.sbzs"></el-input>
        </el-form-item>
        <el-form-item
          label="仪器设备固定资产原值（万元）"
          prop="sbzcyz"
          :rules="($validate.numRange(true, 0, 999999), $validate.decimal(true,3))"
        >
          <el-input v-model.trim="formData.sbzcyz"></el-input>
        </el-form-item>
        <el-form-item
          label="工作面积（m²）"
          prop="gzmj"
          :rules="($validate.numRange(true, 0, 999999), $validate.decimal(true, 3))"
        >
          <el-input v-model.trim="formData.gzmj"></el-input>
        </el-form-item>
        <el-form-item
          label="房屋建筑面积（m²）"
          prop="fwjzmj"
          :rules="($validate.numRange(true, 0, 999999), $validate.decimal(true, 3))"
        >
          <el-input v-model.trim="formData.fwjzmj"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="primary" @click="submitForm">提交修改</el-button>
  </div>
</template>
<script>
import Aselect from '@/components/Select/Aselect';
import AdatePicker from '@/components/TimePicker/AdatePicker';
import AreaSelect from '@/components/AreaSelect/AreaSelect';
import userApi from '@/api/user';
import { decrypt } from '@/utils/sms4util';

export default {
  components: {
    Aselect,
    AreaSelect,
    AdatePicker,
  },
  data() {
    return {
      formData: {
        idPhoto: {},
        signPhoto: {},
      },
      fddbrXmMerged: false,
      creditCodeMerged: false
    };
  },
  computed: {
    userId() {
      return this.$store.state.user.userInfo.id;
    },
    userType() {
      return this.$store.state.user.userInfo.userType;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    pickerOptions() {
      return {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      };
    },
    async init() {
      let params = {
        id: this.userId,
        type: this.userType,
      };
      const res = await userApi.getUserInfo(params);

      const fddbrXm = res.fddbrXm || res.realname;
      if (fddbrXm) {
        this.fddbrXmMerged = true;
      }
      // ykb user dont have creditCode as synced to system
      if (res.creditCode) {
        this.creditCodeMerged = true;
      }
      this.formData = {
        ...this.formData,
        ...res,
        unitTel: res.unitTel ? decrypt(res.unitTel) : '',
        creditCode: res.creditCode ? decrypt(res.creditCode) : '',
        fddbrXm: fddbrXm,
      };
      const formTimer = setTimeout(() => {
        this.$refs.form.clearValidate();
        clearTimeout(formTimer);
      }, 0);
    },
    async submitForm() {
      try {
        await this.$validate.checkValidate(this.$refs.form);
        let params = {
          ...this.formData,
          userType: this.userType,
        };
        await userApi.editUserInfo(params);
        this.$message.success('修改成功');
        this.$store.state.user.userInfo.isCompleteInfo = '1';
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.global-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-main {
  width: 700px;
}
</style>
